<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>个人首页</title>
	<meta name="zbl" content="朱柄林的个人首页">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="shortcut icon" href="images/icon-logo.png" />
    <link rel="stylesheet" href="css/corner.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/font.css">
	<link rel="stylesheet" href="css/style.css">
	<style>
		.pace-running::before{
			width: 100%;
			height: 100%;
			display: block;
			content: "";
			background: #eee;
		}
	</style>
</head>
<body>
	<a href="#" class="hed-box">
		<img src="images/tx_logo.jpg" class="tx" alt="">
		<!-- <img src="images/logo.png" class="logo" alt=""> -->
		<div class="box-txt">幸会，我是elwin</div>
	</a>
	<div class="swiper-container swiper-no-swiping">
        <div class="swiper-wrapper">
        	<header class="swiper-slide">
				<div class="container-fluid">
					<div class="banner">
						<iframe src="unit/wow slider.html" style="width:100%;height:100%;max-width:100%;overflow:hidden;border:none;display:block;" marginheight="0" marginwidth="0"></iframe>
						<div class="banTxt">
							<h1 class="center__text glitch" data-text="Hello, I'm elwin">Hello, I'm elwin</h1>
							<p>我是elwin</p>
							<p>WEB前端开发工程师</p>
							<p class="youX">
								<a href="#">elwin_2001@163.com</a>
							</p>
						</div>
					</div>
					<div class="Mask"></div>
				</div>
			</header>
            <div class="swiper-slide aboutMe">
            	<div class="Mask"></div>
            	<div class="Z-introduce-me">
	            	<div class="swiper-demo"></div>
	            	<div class="meImg">
	            		<img src="images/meimg.jpg" alt="">
	            	</div>
	            	<div class="meTxt">
	            		<h2>我的介绍</h2>
	            		<h3>- 您好，我是Elwin</h3>
	            		<p>WEB前端工程师。</p>
	            		<h3>- 我能效劳</h3>
	            		<p>PS切图，网页制作，AJAX后台交互，利用各种技巧实现丰富的界面。</p>
	            		<h3>- 关于我</h3>
	            		<p>坐标吴桥。目前就读于泊头职业学院，玛畜，前端工程师，主要从事网站开发与制作。技术栈Html+Css+JavaScript</p>
	            		<p>喜欢参与团队工作与集体活动。重视自身素质培养。</p>
	            	</div>
            	</div>
            </div>
            <div class="swiper-slide Jis-mastery">
            	<div class="Mask"></div>
            	<div class="Z-mastery">
        			<h2>技能<span>掌握</span></h2>
        			<div class="btns"><!--  swiper-demo -->
	        			<button class="Yes">HTML</button>
	        			<button class="Yes">CSS</button>
	        			<button class="Yes">BootStrap</button>
	        			<button class="Yes">JavaScript</button>
	        			<button class="Yes">AJAX</button>
	        			<button>Vue.js</button>
	        			<button>Less</button>
	        			<button>Photoshop</button>
	        			<button>Git</button>
        			</div>
        			<div class="box"><!--  swiper-demo -->
						<div class="complete">
							<p>HTML</p>
							<div class="comp-inner html"></div>
						</div>
						<div class="complete">
							<p>CSS</p>
							<div class="comp-inner css"></div>
						</div>
						<div class="complete">
							<p>BootStrap</p>
							<div class="comp-inner bs"></div>
						</div>
						<div class="complete">
							<p>JavaScript</p>
							<div class="comp-inner js"></div>
						</div>
						<div class="complete">
							<p>AJAX</p>
							<div class="comp-inner ajax"></div>
						</div>
            		</div>
            	</div>
            </div>
            <div class="swiper-slide Me-process">
            	<div class="Mask"></div>
            	<div class="Z-process">
            		<div class="title">
            			<h3>我的成长史</h3>
            			<div class="inner">
            			<div class="box">
            				<div class="txt">
            					<i>2018</i><span>YEAR</span>
            				</div>
            				<div class="clock"></div>
            			</div>
        				<ul class="coud">
        					<li>2018</li>
        					<li>2019</li>
        				</ul>
        				</div>
            		</div>
            		<ul class="Z-date">
            			<li class="active">
        					<span class="year">2018年</span>
        					<span class="md">9月</span>
        					<i></i>
        					<b></b>
            			</li>
            			<li class="active">
        					<span class="year">2018年</span>
        					<span class="md">12月</span>
        					<i></i>
        					<b></b>
            			</li>
            			<li>
        					<span class="year">2019</span>
        					<span class="md">12月</span>
        					<i></i>
        					<b></b>
            			</li>
            		</ul>
            		<div class="Z-work">
            			<ul>
            				<li class="active">
            					<h3 class="title">来到盛邦升华驻泊头职业学院</h3>
            					<p class="txt">
            						<span><计算机/web前端工程师></span>
									学习html，css，javascript，ajax以及响应式页面，bootstrap，vue.js等框架书写前端功能，让页面更充实丰富。
								</p>
            				</li>
            				<li class="active">
            					<h3 class="title">来到盛邦升华驻泊头职业学院</h3>
            					<p class="txt">
            						<span><校园/当选职位></span>
            						当选班级学习委员，学习小组组长及宿舍管理员
								</p>
            				</li>
            				<li>
            					<h3 class="title">毕业于盛邦升华驻泊头职业学院</h3>
            					<p class="txt">
            						<span><大专></span>
            						获得优秀生奖状 <br />
            						获得班级答辩前三名
								</p>
            				</li>
            			</ul>
            		</div>
            	</div>
            </div>
            <div class="swiper-slide My-works">
            	<div class="Mask"></div>
				<div class="Z-works">
					<h2 class="title">作品<span>赏析</span></h2>
					<div class="left">
						<div class="border"></div>
						<div class="wrapper">
							<div class="carousel">
								<a href="http://zblh.gitee.io/resume" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-me.png" />
								</a>
								<a href="http://zblh.gitee.io/duitang" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-dt.png" />
								</a>
								<a href="http://zblh.gitee.io/yylw" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-yy.png" />
								</a>
								<a href="http://zblh.gitee.io/confession" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-love.png" />
								</a>
								<a href="http://zblh.gitee.io/tengxunxinwen" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-tx.png" />
								</a>
							</div>
						</div>
						<div class="pager"></div>
					</div>
					<div class="right">
						<div class="border"></div>
						<div class="wrapper">
							<div class="carousel">
								<a href="http://zblh.gitee.io/jixieshi" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-jxs.png" />
								</a>
								<a href="http://zblh.gitee.io/tianya_mingyue_knife" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-ty.png" />
								</a>
								<a href="http://zblh.gitee.io/benchi" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-benc.png" />
								</a>
								<a href="http://zblh.gitee.io/web_template" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-mob.png" />
								</a>
								<a href="http://zblh.gitee.io/jdcom" target="z">
									<i class="txtIcon"></i>
									<img src="images/works-jd.png" />
								</a>
							</div>
						</div>
						<div class="pager"></div>
					</div>
				</div>
            </div>
            <div class="swiper-slide Me-contact">
            	<div class="Mask"></div>
				<div class="Z-contact">
					<div class="box-top"></div>
					<div class="box-bottom"></div>
					<h2>CONTACT<span>FOR ME</span></h2>
					<div class="lian-bottom">
						<p class="lian-title">
							<i>灵感</i>
							<i>代码</i>
							<i>梦想</i>
							<i>未来</i>
						</p>
						<p class="lian-txt">
							学习是一个充实愉悦的过程<br>喜欢尝试，期待新鲜事物<br>前端即兴趣，兴趣即未来<br>行路有良友，便是捷径<br>期待有机会与您共事！
						</p>
						<div class="lian-lo">
							<a href="https://gitee.com/zblh" target="z" class="icon iconfont">&#xe501;<span>码云</span></a>
							<a href="https://github.com/ZhuBingLin" target="z" class="icon iconfont">&#xe670;<span>Github</span></a>
							<a href="https://space.bilibili.com/302313355" target="z" class="icon iconfont">&#xe662;<span>B站</span></a>
							<a href="#" target="z" class="icon iconfont">&#xeb3e;<span>知乎</span></a>
							<a href="#" class="icon iconfont img">&#xe658;
								<span><img src="images/qq.png" alt=""></span>
							</a>
							<a href="#" class="icon iconfont img">&#xe7bd;
								<span>微信<img src="images/wx1.png" alt=""></span>
							</a>
						</div>
					</div>
				</div>
				<p class="ban">© 2019 ZhuBingLin</p>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- <script data-pace-options='{ "ajax": false }' src='js/pace.js'></script> -->
	<script src="js/swiper.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>